<template>
	<div class="container">
		<el-form
			ref="elForm"
			:model="formData"
			:rules="rules"
			size="medium"
			label-width="140px"
		>
			<el-form-item label="任务名称" prop="mobile">
				<el-select
					v-model="formData.task_id"
					placeholder="请选择下拉选择任务名称"
					:style="{ width: '80%' }"
					@change="handleChangeJob"
				>
					<el-option
						v-for="(item, index) in task_nameOptions"
						:key="index"
						:label="item.job_name"
						:value="item.job_id"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="任务类名" prop="job_class_name">
				<el-input
					v-model="formData.job_class_name"
					disabled
					placeholder="请输入任务类名"
					clearable
					:style="{ width: '80%' }"
				>
				</el-input>
			</el-form-item>
			<el-form-item label="任务描述">
				<el-input
					v-model="formData.job_describle"
					disabled
					type="textarea"
					placeholder="请输入任务描述"
					:autosize="{ minRows: 1, maxRows: 2 }"
					:style="{ width: '80%' }"
				></el-input>
			</el-form-item>
			<el-form-item label="触发类型" prop="job_type">
				<el-select
					v-model="formData.job_type"
					placeholder="请选择触发类型"
					clearable
					:style="{ width: '80%' }"
					@change="handleChangeType"
				>
					<el-option
						v-for="(item, index) in triggerOptions"
						:key="index"
						:label="item.label"
						:value="item.value"
						:disabled="item.disabled"
					></el-option>
				</el-select>
			</el-form-item>
			<el-row v-if="type_easy === true">
				<el-col :span="10">
					<el-form-item label="触发频率" prop="repeat_interval">
						<el-input
							v-model="formData.repeat_interval"
							placeholder="请输入触发频率"
							clearable
							:style="{ width: '80%' }"
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="重复次数" prop="repeat_count">
						<el-input
							v-model="formData.repeat_count"
							placeholder="请输入重复次数"
							clearable
							:style="{ width: '80%' }"
						>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="type_easy !== true">
				<el-col :span="10">
					<el-form-item label="执行时间" prop="fire_times">
						<el-input
							suffix-icon="el-icon-date"
							v-model="formData.fire_times"
							placeholder="请输入执行时间"
							clearable
							:style="{ width: '80%' }"
							@focus=";(showTime = true), getSpaceTime()"
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="20" v-if="showTime === true">
					<div class="notice">
						说明:00:00表示0:00—00:59时间段,所选时间可连续、可不连续。
					</div>
					<div style="width: 150px">
						<span
							class="time"
							v-for="(item, index) in timeList"
							:key="index"
							@click="getTime"
							>{{ item }}</span
						>
					</div>
				</el-col>
			</el-row>
			<el-form-item label="触发描述">
				<el-input
					v-model="formData.cron_expression"
					type="textarea"
					placeholder="请输入触发描述"
					:autosize="{ minRows: 1, maxRows: 2 }"
					:style="{ width: '80%' }"
				></el-input>
			</el-form-item>
			<!-- 动态生成form 表单 -->
			<el-row>
				<create-form
					:formJsonList="formJsonList"
					:formDataObj="formData.param_list"
					@setFormData="getFormData"
					@setFormRules="getRules"
				>
				</create-form>
			</el-row>
			<!-- 子任务-->
			<el-row><el-divider></el-divider></el-row>
			<!--
				<create-form
					:formJsonList="formJsonList"
					:formDataObj="formData.param_list"
					@setFormData="getFormData"
					@setFormRules="getRules"
				>
				</create-form>
			-->
			<el-form-item>
				<el-button @click="handleCancel">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import { get_task_list, get_task_child_list, get_client_params, addServerJob } from 'api/coll-mg'
import { getSpaceTime } from 'utils/base.js'
import createForm from './form/index.vue'
export default {
	components: { createForm },
	props: [],
	data () {
		return {
			checkList: [],
			showTime: false,
			formJsonList: [],
			type_easy: true, // 触发器类型
			formData: {
				param_list: {},
				task_id: undefined,
				job_class_name: undefined,
				job_describle: undefined,
				job_type: undefined,
				repeat_interval: undefined,
				repeat_count: undefined,
				fire_times: undefined
			},
			task_nameOptions: [],
			rules: {
				job_describle: [],
				field103: [ {
					required: true,
					message: '请选择触发类型',
					trigger: 'change'
				} ],
				fire_times: [ {
					required: true,
					message: '请输入触发频率',
					trigger: 'blur'
				} ],
				repeat_count: [ {
					required: false,
					message: '请输入重复次数',
					trigger: 'blur'
				} ],
				field108: [],
				field112: [],
				field115: [
					{
						required: true,
						message: "请输入数据库配置",
						trigger: "blur"
					}
				],
				field116: [
					{
						required: true,
						message: "日期型参数不能为空",
						trigger: "change"
					}
				],
				field122: [
					{
						required: true,
						message: "请选择子任务",
						trigger: "change"
					}
				]
			},
			triggerOptions: [
				{
					label: "简单触发器",
					value: 0
				},
				{
					label: "定时触发器",
					value: 1
				}
			],
			field122Options: [
				{
					label: "选项一",
					value: 1
				},
				{
					label: "选项二",
					value: 2
				}
			],
			form_config: [], // fom 表单  json 数据
			sonFormdata: [],
			activeName: null,
			timeList: [],
			radio: [],
			formChildList: [] // 子任务参数
		}
	},
	created () { },
	mounted () {
		this.get_task_list();
	},
	methods: {
		getFormData ( val ) {
			// 主任务参数
			if ( val ) {
				for ( const key in val ) {
					this.$set( this.formData.param_list, key, val[ key ] )
				}
			}
		},
		getChildFormData ( val ) {
			// 子任务组件参数
			let key = this.activeName
			if ( val ) {
				this.$set( this.formData, key, Object.assign( {}, val ) )
				// 通知子任务组件更新
				for ( const key in this.formData[ key ] ) {
					this.$set( this.formData[ key ], key, val[ key ] )
				}
			}

		},
		getRules ( val ) {
			// 数据校验
			// console.log( val );
		},
		get_task_list ( id ) {
			// 获取主任务配置参数
			get_task_list().then( res => {
				if ( res.code === 0 && Array.isArray( res.data ) ) {
					let data = [ ...res.data ];
					data.map( item => {
						item.job_id = parseInt( item.job_id );
						console.log( typeof item.job_id );
					} );
					this.task_nameOptions = [ ...data ];
					console.log( this.task_nameOptions );
					// 设置默认值
					this.formData.task_id = data[ 0 ].job_id;
					this.handleChangeJob();
					// 动态渲染表单数据
				} else {
					this.task_nameOptions = res.data = [];
				}
			} );
		},
		get_son_task ( obj ) {
			// 获取子任务 parent_id
			get_task_list( obj ).then( res => {
				if ( res.code === 0 && res.data.length > 0 ) {
					console.log( res.data );
					let data = [ ...res.data ]
					this.sonFormdata = data
					this.activeName = data[ 0 ].job_id
					//todo 获取第一个子任务参数
					this.get_child_params( { job_id: this.activeName } )
				} else {
				}
			} )
		},
		get_client_params () {
			// 主任务配置参数
			console.log( '主任务' );
			let id = this.formData.task_id
			get_client_params( { job_id: id } ).then( res => {
				if ( res.code === 0 && Array.isArray( res.data ) ) {
					// 获取子任务
					this.formJsonList = [ ...res.data ]
				} else {
					this.formJsonList = [];
				}
			} );
		},
		get_child_params ( obj ) {
			// 获取子任务参数
			// { job_id: id }
			get_client_params( obj ).then( res => {
				if ( res.code === 0 && Array.isArray( res.data ) ) {
					// 获取子任务
					this.formChildList = [ ...res.data ]
				} else {
					this.formJsonList = []
				}
			} )
		},
		get_child_params ( obj ) {
			// 获取子任务参数
			// { job_id: id }
			get_client_params( obj ).then( res => {
				if ( res.code === 0 && Array.isArray( res.data ) ) {
					// 获取子任务
					this.formChildList = [ ...res.data ]
				} else {
					this.formJsonList = []
				}
			} )
		},
		handleChangeJob ( val ) {
			// this.formData.param_list = {}
			if ( val === undefined ) {
				val = this.formData.task_id;
			}
			// 设置任务类名,描述
			try {
				let obj = {};
				obj = this.task_nameOptions.find( item => item.job_id == val );
				console.log( obj );
				let sun_obj = { parent_id: obj.job_id }
				this.formData.job_class_name = obj.job_class_name
				this.formData.job_describle = obj.job_describle
				// 获取对应主任务参数
				this.get_client_params()
				// 同时获取子任务
				// this.get_son_task( sun_obj )
			} catch {
				console.log( "error" );
			}
		},
		handleChangeType ( val ) {
			// 触发器类型
			if ( val === 0 ) {
				// 简单触发器
				this.type_easy = true;
			} else {
				// 定时触发
				this.type_easy = false;
			}
		},
		handleClick () {
			// 子任tab务切换
			console.log( this.activeName );
			// 获取子任务参数
			this.get_child_params( { job_id: this.activeName } )
		},
		submitForm () {
			let _this = this
			let params = {
				server_id: this.$route.query.id,
				job_list: [
					{
						'jobId': 0,
						'serverJobId': 0,
						'jobType': 0,
						'repeatCount': 0,
						'repeatInterval': 0,
						'cronExpression': this.formData.cronExpression,
						'fireTimes': this.formData.fireTimes,
						// 'activeFlag': this.this.formData.activeFlag,
						paramList: this.formData.param_list
					}
				]
			}
			// 数据处理
			addServerJob( params ).then( res => {
				if ( res.code === 0 ) {
					this.$message.succe( '操作成功' )
				} else {
					this.$message.fail( res.msg )
				}
			} )
			console.log( this.formData );
			this.$refs[ "elForm" ].validate( valid => {
				if ( !valid ) return;
				// TODO 提交表单
			} )
		},
		resetForm () {
			this.$refs[ "elForm" ].resetFields();
		},
		handleCancel () {
			// 取消
			this.$router.go( -1 );
		},
		getSpaceTime () {
			this.timeList = getSpaceTime()
		},
		getTime () {
			// 点击获取选中的时间
		},
		handleChangeChild ( val ) {
			console.log( val );
		}
	}
};
</script>
<style scoped lang="less">
.container {
	padding: 0 20px;
	.el-form-item__content /deep/ .el-select > .el-input {
		width: 520px;
	}
	.time {
		border: 1px solid #ddd;
		color: #999;
		margin-right: 15px;
	}
}
</style>
